<!--
 * @Descripttion: 
 * @Author: wang pingqi
 * @Date: 2022-11-24 15:41:11
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-11-24 19:01:41
-->
<template>
    <div class="chart-wrapper">
        <div class="state" v-if="loading">
            <i class="state-inner el-icon-loading"/>
        </div>

        <slot v-else-if="show"></slot>

        <div class="state" v-else>
            <p class="state-inner">暂无数据</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ChartWrapper",

        props: {
            loading: {
                type: Boolean,
                default: false
            },
            show: {
                type: Boolean,
                default: false
            }
        }
    };
</script>

<style lang="scss" scoped>
    @import "./vars.module.scss"; //引入方式

    $block-height: 250px;
    $header-height: 40px;
    //$content-height: calc(100% - #{$header-height});
    $content-height: 100%;
    $content-min-height: calc(#{$block-height} - #{$header-height});

    .chart-wrapper {
        height: $content-height;
        width: 100%;
        /* min-height: $content-min-height; */
    }

    .state {
        height: 100%;
        min-height: $content-min-height;
        width: 100%;
        position: relative;

        .state-inner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: $font-size-base;
            color: $color-text-placeholder;
            &.el-icon-loading {
                font-size: 34px;
            }
        }
    }
</style>
